Sami's Site: Extras and Fun Stuff

HOME FORUM

There are 3 parts of the Dynamic Drive script.   We will combine 2 things together and place all of the code together. None of the code was placed into the HEAD of the this page. This version displays just ONE floating image. 1)   DD's step 1  Capture the images and js file that controls the movement of the floating images. Right click this link to download the js file.   Choose Save Target As and save the file on your computer. Right the butterfly to save each to your computer.   My samisite animated imageused on this page is not for download for public use, but you can use either this butterfly or dfly or your own animated gif.                If you use your OWN images, be sure to adjust the SIZE of the images in the code below to match. To capture the code, press Select All then COPY the contents. Paste code into your page, near the top of your web page. Not using CSB or Trellix:  REMOVE each ^gEMDIR/ from the script!  Use FTP program to upload the js and balloon images to your website space. Using CSB or Trellix:  use an INSERT HTML box to hold your script and put your js and images into web components .(webgem in Trellix).  Then you MUST change each gEMDIR to GEMDIR before using code! Select All <script type="text/javascript" src="^gEMDIR/moveobj.js"> </script> <script type="text/javascript"> /*********************************************** * Floating image script- By Virtual_Max (http://www.geocities.com/siliconvalley/lakes/8620) * Modified by Dynamic Drive for various improvements * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code * Using CSB or Trellix: use an INSERT HTML box to hold your script and put your js and images into web components (webgem in Trellix). Then you MUST change each gEMDIR to GEMDIR before using code! ***********************************************/ //Step 1: Define unique variable names depending on number of flying images (ie:1): var flyimage1 function pagestart(){ //Step 2: Using the same variable names as 1), add or delete more of the below lines (72=width, height=51 of image): flyimage1=new Chip("flyimage1",72,51); //Step 3: Using the same variable names as 1), add or delete more of the below lines: movechip("flyimage1"); } if (window.addEventListener) window.addEventListener("load", pagestart, false) else if (window.attachEvent) window.attachEvent("onload", pagestart) else if (document.getElementById) window.onload=pagestart </script> <!-- Step 4: Define your flying images. For each image's ID tag, use the same variable names as 1) above --> <DIV ID="flyimage1" STYLE="position:absolute; left: -500px; width:72; height:51;"> <A HREF="http://samisite.com/forum"><IMG SRC="^gEMDIR/butterfly.gif" BORDER=0></a> </DIV> CODE NOTES: ^GEMDIR/ - Not using CSB/Trellix?  Remove this and use  FTP or file manager to upload image files to your webspace directly.  Then enter the full path to the image. ^GEMDIR/ - Using CSB/Trellix? MUST have this in ALL CAPS for the code to work.  CSB will upload the files to your webspace for you if you use this and put the images into webcomponents! balloon2.gif - change each image name to match YOUR image names http://samisite.com/forum - change the URL address for each floating image.  If your visitor clicks this, they will be taken to the other page.  If you remove the link, clicking does nothing.  Balloon4 code has the link removed for example. ,72,51- change the size of the image to match yours The color changes, etc can effect functionality!  Use the Select All above and modify! <script type="text/javascript" src="^GEMDIR/moveobj.js"> </script> <script type="text/javascript"> /*********************************************** * Floating image script- By Virtual_Max (http://www.geocities.com/siliconvalley/lakes/8620) * Modified by Dynamic Drive for various improvements * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code * Using CSB or Trellix:  use an INSERT HTML box to hold your script and put your js and images into web components (webgem in Trellix).  Then you MUST change each gEMDIR to GEMDIR before using code! ***********************************************/ //Step 1: Define unique variable names depending on number of flying images (ie:1): var flyimage1 function pagestart(){ //Step 2: Using the same variable names as 1), I removed all but one image (72=width, height=51 of image):  flyimage1=new Chip("flyimage1",72,51); //Step 3: Using the same variable names as 1), I removed all but one image: movechip("flyimage1"); } if (window.addEventListener) window.addEventListener("load", pagestart, false) else if (window.attachEvent) window.attachEvent("onload", pagestart) else if (document.getElementById) window.onload=pagestart </script> <!-- Step 4: Define your flying images. For each image's ID tag, use the same variable names as 1) above --> <DIV ID="flyimage1" STYLE="position:absolute; left: -500px; width:72; height:51;"> <A HREF="http://samisite.com/forum"><IMG SRC="^GEMDIR/butterfly.gif" BORDER=0></a> </DIV> This version displays just ONE floating image of a butterfly. TWO IMPORTANT TIPS: 1) ALWAYS make sure your image names are exactly the same in the code and the name.  No spaces or characters (other than _) and caps count!  TN_image is not the same as tn_image.  Recommend using only lowercase instead of caps.   2)  Optimize your photos for fastest loading.  Don't put an image on your site directly from your digital camera.  It will take WAY too long to load!